<template>
    <div class="common-layout">
        <el-container>
            <el-header style="border-bottom: 1px solid #ccc;">
                <div style="display: flex;justify-content:space-between;align-items: center;">
                    <h1>Gx比赛系统</h1>
                    <div
                        style="display: flex;flex-direction: row;gap: 10px;justify-content:center;align-items: center;">
                        <h2>{{ username }}</h2>
                        <el-button type="primary" @click="logout">退出</el-button>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu router default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                        @close="handleClose">
                        <el-menu-item @click="router.push('/index/player')">
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>选手列表</span>
                        </el-menu-item>
                        <el-menu-item @click="router.push('/index/match')">
                            <el-icon><icon-menu /></el-icon>
                            <span>比赛列表</span>
                        </el-menu-item>
                        <el-menu-item @click="router.push('/index/info')">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>擂台挑战赛</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main style="border-left: 1px solid #ccc;">
                    <!-- 三个界面，用router-view占位 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import {
    Document,
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const logout = () => {
    router.push('/user')
}

const username = ref('')
// 初始化数据
const initData = async () => {
    const result = await $api.get('/user/get_info')
    const { code, data, msg } = result.data
    // 成功时
    if (code == 0) {
        username.value = data
    } else {
        ElMessage.error(msg)
    }
}

// 获取数据操作放在onMounted生命周期中
onMounted(() => {
    initData()
})
</script>

<style scoped></style>